<template>
<div :id="id">
  <el-card shadow="never"
            class="aui-card--fill">
    <div>
      <div class="cardHeader" @mouseenter="mouseenter(true)" @mouseleave="mouseenter(false)"
           v-if="(gadgetSetting.headerTitle && gadgetSetting.headerTitle.trim().length>0) || (gadgetSetting.headerDescription && gadgetSetting.headerDescription.trim().length>0)">
              <GadgetTitle :gadgetSetting="gadgetSetting" :widgetName="widgetName"></GadgetTitle>
              <MoreMenu :slicer='slicer' :gadgetId='id' :gadgetType='gadgetInfo.com' @updateQuery="query" @fullScreen="fullScreen"/>
        <!--<div class="btns">
          <i class="el-icon-more" @click="showBtns"></i>
          <ul class="oprateOptions" v-if="showstatus">
            <li @click="showQueryModel">edit</li>
            <li @click="delDadget(id)">delete</li>
          </ul>
        </div>-->
      </div>
      <div class="control-section">
        <div class="content-wrapper"
             v-loading="loading">
          <ejs-treegrid v-if="isHasData" ref='treegrid' :dataSource='dataList' :treeColumnIndex='gadgetSetting.treeColumnIndex' :allowPaging='gadgetSetting.allowPaging'
                        :pageSettings='gadgetSetting.pageSettings'
                        idMapping='Id'
                        parentIdMapping='ParentId'
                        :toolbar='gadgetSetting.toolbar' :filterSettings='gadgetSetting.filterSettings' :allowReordering='gadgetSetting.allowReordering'
                        :allowResizing='gadgetSetting.allowResizing' :allowTextWrap='gadgetSetting.allowTextWrap' :allowFiltering='gadgetSetting.allowFiltering'
                        :searchSettings='gadgetSetting.searchSettings'
                        :load="load"
                        :dataBound ="dataBound"
          >
          </ejs-treegrid>
          <!-- <div v-else
                class="gadget-no-data">
            <el-image @click="query()" :src='noDataImageUrl'
                      fit='fill'></el-image>
          </div> -->
        </div>
      </div>
    </div>
    <model  :showSetting="queryModelDefaultSetting.showSetting" @queryModelClosed="queryModelClosed"
      :dataInfo="queryModelDefaultSetting.dataInfo"  :updateGadget="upgradeGadgetSetting" :slicer='slicer'/>
  </el-card>
</div>
</template>

<script>
import mixinGadgetViewModule from '@/mixins/gadget-view-module'
import mixinViewModule from '@/mixins/simplereport-view-module'

export default {
  mixins: [mixinGadgetViewModule, mixinViewModule],
  components: { model: () => import('@/components/gadget/query-model/query-model') },
  data () {
    return {
      mixinViewModuleOptions: {
        pageId: this.pageId
      },
      isHasData: false,
      gadgetSetting: {
        allowReordering: true,
        toolbar: ['ExpandAll', 'ColumnChooser', 'CollapseAll'],
        headerTitle: '',
        headerDescription: ''
      },
      dataList: [],
      loading: false,
      queryModelDefaultSetting: {
        showSetting: false,
        dataInfo: {
          businessId: this.pageId,
          gadgetId: this.id,
          gadgetType: this.gadgetInfo.com,
          gadgetSetting: {
            allowPaging: true,
            allowReordering: true,
            allowResizing: true,
            allowTextWrap: true,
            allowFiltering: true,
            treeColumnIndex: 1,
            searchSettings: { hierarchyMode: 'Parent' },
            pageSettings: { pageCount: 4, pageSize: 10 },
            toolbar: ['ExpandAll', 'CollapseAll', { text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'refresh' }],
            filterSettings: { type: 'Menu', hierarchyMode: 'Parent' }
          }
        }
      },
      isGridInit: false
    }
  },

  created () {
    this.gadgetHeight = (this.gadgetInfo.h * 20) - 20
    this.query()
    this.subscribeMessage('runReport', this.query)
    this.$store.state.isWidget = false
  },
  watch: {
    editMode (val) {
      if (!val) {
        this.saveGadgetSetting()
      }
    }
  },
  methods: {
    load (item) {
      this.grid = this.$refs.treegrid
      this.gadgetHeight = (this.gadgetInfo.h * 20) - 60
    },
    dataBound (args) {
      if (!this.isGridInit) {
        this.isGridInit = true
        this.applyGadgetSetting()
      }
    },
    saveGadgetSetting () {
      var _self = this
      _self.gadgetSetting = _self._.merge(_self.gadgetSetting, JSON.parse(this.grid.ej2Instances.getPersistData()))
      // grid table , save obj  from json obj
      const params = {
        businessId: this.mixinViewModuleOptions.pageId,
        gadgetSetting: _self.gadgetSetting,
        gadgetId: this.id,
        type: 1
      }
      this.$interface.reports.postReportSetting(params).then(({ data: res }) => {
        if (res.code !== 0) {
          return _self.$message.error(res.msg)
        }
      })
    },
    queryModelClosed () {
      this.queryModelDefaultSetting.showSetting = false
      this.query()
    },
    showQueryModel () {
      this.queryModelDefaultSetting.showSetting = true
    },
    resized (i, newH, newW, newHPx, newWPx) {
      this.gadgetHeight = (newH * 20) - 60
      this.gadgetWidth = newWPx
    },
    query () {
      this._.merge(this.gadgetSetting, this.queryModelDefaultSetting.dataInfo.gadgetSetting)
      this.isHasData = false
      this.loading = true
      var _self = this
      // _self.gadgetSetting = _self._.merge(_self.gadgetSetting, _self.queryModelDefaultSetting.dataInfo.gadgetSetting)
      var param = {
        ...this.slicer,
        code: this.code,
        gadgettype: this.wgadgettype,
        widgetName: this.wName,
        pageId: this.pageId,
        gadgetId: this.id,
        filter: this.getFilterStr()
      }
      this.$interface.reports.getReportDataInfo(param).then(({ data: res }) => {
        // process data
        _self.verifyHasData(res)
        // _self.dataList = _self.data
        if (res.data) {
          _self.dataList = res.data
        }
        // process config
        if (res.code !== 0) {
          this.loading = false
          return this.$message.error(res.msg)
        }
        // if (res.config) {
        //   _self.gadgetSetting = _self._.merge(_self.gadgetSetting, res.config.report)
        // }
        _self.isHasData = true
        this.loading = false
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped>
.el-card ::v-deep .el-card__body {
  padding: 0px !important;
}

.el-card ::v-deep .el-divider--horizontal {
  margin: 3px 0 !important;
}

.threepoints {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cardHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 20px;
  border-bottom: 1px solid #eee;
  position: relative;
}

.cardIcon {
  font-size: 16px;
  font-weight: 600;
  margin-left: 10px;
  position: relative;
  top: -2px;
}

.toolbar {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
</style>
